<template>
    <div class="mi-cart">
        <div class="container">
            <!-- 商品list -->
            <div class="cart-goods-list">
                <!-- list头部 -->
                <div class="list-hd">
                    <div class="col col-check" id="col-check" quanCheck="false"><i class="ic-checkbox">√</i>全选</div>
                    <div class="col col-img"> </div>
                    <div class="col col-name">商品名称</div>
                    <div class="col col-price">单价</div>
                    <div class="col col-num">数量</div>
                    <div class="col col-total">小计</div>
                    <div class="col col-action">操作</div>
                </div>
                <!-- list身体 -->
                <div class="list-bd">
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-1.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">29元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="1">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">29元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="item-box clearfix">
                            <div class="col col-check" quanCheck="false"><i class="ic-checkbox">√</i></div>
                            <div class="col col-img"><a href="#"><img src="../assets/uploads/goods-2.jpg" alt=""></a></div>
                            <div class="col col-name"><h3><a href="#">小米高清数据线-1.5米 白色</a></h3></div>
                            <div class="col col-price">21元</div>
                            <div class="col col-num">
                                <div class="num-box">
                                    <a href="javascript:;"><span>-</span></a>
                                    <input type="text" value="2">
                                    <a href="javascript:;"><span>+</span></a>
                                </div>
                            </div>
                            <div class="col col-total">21元</div>
                            <div class="col col-action"><p>x</p></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 结算 -->
            <div class="cart-bar">
                <!-- 左边 -->
                <div class="section-left"><a href="#">继续购物</a><span class="cart-total">共<i>1</i>件商品，已选择<i>1</i>件</span>
                </div>
                <!-- 右边 -->
                <span class="total-price">合计：<em>1</em>元<a href="#">去结算</a></span>
            </div>
        </div>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
    mounted() {
        this.slide_bar()
        this.show_category()
        this.money()
    },
    methods: {

        // 展示分类
        show_category(){
            $(".nav-category .category-a").css("visibility","visible")
            $(".home-hero-category").css("visibility","hidden")
            $(".nav-category .category-list").css("background-color","#fff")
            $(".nav-category .category-list a").css("color","#757575")
            $(".nav-category .category-list").css("border","1px solid #ff6700")
            $(".nav-category .category-list").css("border-top","2px solid #ff6700")
        },

        // 购物车计算
        money(){

            // 得到this之后会用到
            var vu=this

            // 全选和不全选
            $("#col-check").click(function(){
                var tag=$("#col-check").attr("quanCheck")
                if(tag=="false"){
                    $(".col-check").each(function(i,ele){
                        // 改变全部选择框的选择状态  包括全选的小选择框
                        $(ele).attr("quanCheck","true")
                        // $(".col-check i:eq("+i+")").css("color","#757575")
                        $(ele).children("i").css("color","#757575")
                    })
                }else{
                    $(".col-check").each(function(i,ele){
                        $(ele).attr("quanCheck","false")
                        // $(".col-check i:eq("+i+")").css("color","#fff")
                        $(ele).children("i").css("color","#fff")
                    })
                }
                // 调用计算金额
                getSum()
            })

            // 小选择框的选择
            $(".list-bd .col-check").click(function(){
                var tag=$(this).attr("quanCheck")
                if(tag=="false"){
                    // 改变小选择框的选择状态
                    $(this).attr("quanCheck","true")
                    $(this).children("i").css("color","#757575")
                    // 计算选择的小选择框的数量
                    var checkLength=0
                    $(".list-bd .col-check").each(function(i,ele){
                        var value=$(ele).attr("quanCheck")
                        if(value=="true"){
                            ++checkLength
                        }
                    })
                    // 小选择框里面选择的等于小选择框的长度就是全部选择 所以把全选按钮改成选择
                    if(checkLength==$(".list-bd .col-check").length){
                        $("#col-check").attr("quanCheck","true")
                        $("#col-check").children("i").css("color","#757575")
                    }else{
                        $("#col-check").attr("quanCheck","false")
                        $("#col-check").children("i").css("color","#fff")
                    }
                }else{
                    $(this).attr("quanCheck","false")
                    $(this).children("i").css("color","#fff")
                    // 计算选择的小选择框的数量
                    var checkLength=0
                    $(".list-bd .col-check").each(function(i,ele){
                        var value=$(ele).attr("quanCheck")
                        if(value=="true"){
                            ++checkLength
                        }
                    })
                    // 小选择框里面选择的等于小选择框的长度就是全部选择 所以把全选按钮改成选择
                    if(checkLength==$(".list-bd .col-check").length){
                        $("#col-check").attr("quanCheck","true")
                        $("#col-check").children("i").css("color","#757575")
                    }else{
                        $("#col-check").attr("quanCheck","false")
                        $("#col-check").children("i").css("color","#fff")
                    }
                }
                // 调用计算金额
                getSum()
                
            })

            // 加减按钮
            // 加
            // console.log($(".list-bd .col-num").children(".num-box").children("input").next())
            $(".list-bd .col-num").children(".num-box").children("input").next().click(function(){
                var n=$(this).siblings("input").val()
                n++
                $(this).siblings("input").val(n)
                // 小计
                var price=$(this).parents(".col-num").siblings(".col-price").html()
                price=price.substr(0,price.length-1)
                $(this).parents(".col-num").siblings(".col-total").html(price*n+"元")
                getSum()
            })

            // 减
            // console.log($(".list-bd .col-num").children(".num-box").children("input").prev())
            $(".list-bd .col-num").children(".num-box").children("input").prev().click(function(){
                var n=$(this).siblings("input").val()
                // 等于1就不能再减
                //  return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交
                //  但在事件函数中，return false表示不执行事件的响应函数，例如，浏览器中浏览页面时点击一个button，button响应函数中有return false，这意味着当点击button时，不进行click事件的响应。
                //  return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交
                if(n==1){
                    return false
                }
                n--
                $(this).siblings("input").val(n)
                // 小计
                var price=$(this).parents(".col-num").siblings(".col-price").html()
                price=price.substr(0,price.length-1)
                $(this).parents(".col-num").siblings(".col-total").html(price*n+"元")
                getSum()
            })

            // 删除商品
            $(".list-bd .col-action").click(function(){
                $(this).parents(".list-item").remove()
                getSum()
                // 删除商品地时候，底下的结算框会上来，当上升到一定位置的时候就给他把固定框去掉
                var cart_bar=document.querySelectorAll(".cart-bar")[1]//取没有quan的那个固定框
                if(cart_bar){
                    var cart_bar_orgin_heigth=cart_bar.offsetTop
                    var bottomHeight=window.scrollY+window.innerHeight
                    if((cart_bar_orgin_heigth+233)<bottomHeight){
                        var node1=document.querySelector('.quan')
                        node1&&document.querySelector(".cart-goods-list").removeChild(node1)
                    }
                }
            })

            // 修改值
            $(".list-bd .col-num").children(".num-box").children("input").change(function(){
                var n=$(this).val()
                // 小计
                var price=$(this).parents(".col-num").siblings(".col-price").html()
                price=price.substr(0,price.length-1)
                $(this).parents(".col-num").siblings(".col-total").html(price*n+"元")
                getSum()
            })

            // 计算总数和总额
            getSum();
            function getSum(){
                // 价钱
                var money=0
                // 总件数
                var count=0
                // 选中的件数
                var checkCount=0
                // 计算全部件数
                $(".list-bd .col-num").each(function(i,ele){
                    count+=parseInt($(ele).children(".num-box").children("input").val())
                })
                $(".cart-total").children("i:eq(0)").html(count)
                // 计算选中的件数
                $(".list-bd .col-num").each(function(i,ele){
                    // 只有选中才算
                    var tag=$(ele).siblings(".col-check").attr("quanCheck")
                    if(tag=="true"){
                        checkCount+=parseInt($(ele).children(".num-box").children("input").val())
                    }
                })
                $(".cart-total").children("i:eq(1)").html(checkCount)
                // 总价钱
                $(".list-bd .col-num").each(function(i,ele){
                    var tag=$(ele).siblings(".col-check").attr("quanCheck")
                    // 只有选中才算
                    if(tag=="true"){
                        var num=0
                        num=parseFloat($(ele).children(".num-box").children("input").val())
                        var price=0
                        price=parseFloat($(ele).siblings(".col-price").html())
                        money+=parseFloat(num*price)
                    }
                })
                $(".total-price").children("em").html(money)
            }

            //一开始进来就计算一下，结算框是不是已经超出屏幕外    这里如果一开始进来就复制节点，下面计算都还没算完，所以结算框就全为1
            getPosition()

            function getPosition(){
                var cart_bar=document.querySelector(".cart-bar")
                var cart_bar_orgin_heigth=cart_bar.offsetTop
                var bottomHeight=window.scrollY+window.innerHeight
                if((cart_bar_orgin_heigth+233)>bottomHeight){
                    var node=cart_bar.cloneNode(true)
                    node.style.position="fixed"
                    node.style.bottom=0+"px"
                    node.style.width=1226+"px"
                    node.style.margin=0+"px"
                    node.classList.add("quan")
                    document.querySelector(".cart-goods-list").appendChild(node)
                }
            }
            // 点击了之后hover失去效果
            // 改成鼠标事件   但是会影响点击之后的颜色   去掉
            // $(".col-check").mouseenter(function(){
            //     $(this).children("i").css("color","#757575")
            // })
            // $(".col-check").mouseleave(function(){
            //     $(this).children("i").css("color","#fff")
            // })
        },

        // 结算框的固定
        slide_bar(){
            var cart_bar=document.querySelector(".cart-bar")
            // 滚动起来一闪一闪      因为滚动的时候，它一直在算结算框距离顶部的高度，一直在赋值所以会有这种视觉效果
            var cart_bar_orgin_heigth
            var bottomHeight
            var topHeight
            window.addEventListener('scroll',function(){
                // 原来的高度
                cart_bar_orgin_heigth=cart_bar.offsetTop         
                // 可见区域底部高度
                bottomHeight=window.scrollY+window.innerHeight
                // 可见区域顶部高度
                topHeight=window.scrollY
                // 自己的高度也才50，怎么多了233   应该是Header的高度
                if((cart_bar_orgin_heigth+233)<bottomHeight){
                    // 这是另外一种方法实现的吸底效果，还有一种方法，就是直接再加一个结算框，但是由于牵扯到结算框地计算，只能获取一个结算框，所以直接克隆节点就没问题    解决了一闪一闪的问题
                    var node1=document.querySelector('.quan')
                    node1&&document.querySelector(".cart-goods-list").removeChild(node1)
                    // cart_bar.style.position="relative"
                    // cart_bar.style.marginBottom=30+"px"
                }else{
                    // cart_bar.style.position="fixed"
                    // cart_bar.style.bottom=0+"px"
                    // cart_bar.style.width=1226+"px"
                    // cart_bar.style.margin=0+"px"
                    var node2=document.querySelector('.quan')
                    node2&&document.querySelector(".cart-goods-list").removeChild(node2)
                    var node=cart_bar.cloneNode(true)
                    node.style.position="fixed"
                    node.style.bottom=0+"px"
                    node.style.width=1226+"px"
                    node.style.margin=0+"px"
                    node.classList.add("quan")
                    document.querySelector(".cart-goods-list").appendChild(node)
                }
            })
            // 返回顶部也有问题
            // 有的时候会有一下子变到底部的错觉
        }
    },
}
</script>
<style scoped>
.mi-cart{
    border-top: 2px solid #ff6700;
    background-color: #f5f5f5;
    overflow: hidden;
}
.mi-cart .container{
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
/* 商品list */
.cart-goods-list{
    margin-top: 39px;
    background-color: #fff;
    width: 100%;
}
/* 头部 */
.list-hd{
    height: 70px;
    line-height: 70px;
    padding-right: 26px;
    color: #424242;
}
.list-hd .col{
    float: left;
}
/* 选择按钮 */
.col-check{
    width: 110px;
    /* 设置元素不可选择 */
    user-select:none
}
.col-check .ic-checkbox{
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border: 1px solid #e0e0e0;
    margin-left: 24px;
    background-color: #fff;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    cursor: pointer;
    margin-right: 15px;
}
.col-check .ic-checkbox:hover{
    color: #757575;
}
/* 图片 */
.col-img{
    width: 120px;
    height: 100%;
}
/* 名称 */
.col-name{
    width: 380px;
}
/* 单价 */
.col-price{
    width: 140px;
    padding-right: 18px;
    text-align: center;
}
/* 数量 */
.col-num{
    width: 150px;
    text-align: center;
}
/* 小计 */
.col-total{
    width: 120px;
    padding: 0 40px;
}
/* 操作 */
.col-action{
    width: 80px;
    text-align: center;
}
/* 身体 */
.list-bd{
    /* 清浮动  也可以在上面加clearfix*/ 
    overflow: hidden;
    margin-bottom: 30px;
}
.list-bd .col{
    float: left;
}
.list-bd .item-box{
    padding: 15px 26px 15px 0;
    border-top: 1px solid #e0e0e0;
}
/* 选择按钮 */
.list-bd .item-box .col-check{
    line-height: 86px;
    height: 86px;
}
/* 图片 */
.list-bd .item-box .col-img{
    line-height: 86px;
    height: 86px;
}
.list-bd .item-box .col-img img{
    width: 80px;
    height: 80px;
    display: block;
}
/* 名称 */
.list-bd .item-box .col-name{
    line-height: 86px;
    height: 86px;
}
.list-bd .item-box .col-name h3{
    display: block;
    line-height: 86px;
    margin-top: -2px;
    font-size: 18px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.list-bd .item-box .col-name h3 a{
    color: #424242;
}
/* 单价 */
.list-bd .item-box .col-price{
    line-height: 86px;
    height: 86px;
}
/* 数量 */
.list-bd .item-box .col-num{
    line-height: 86px;
    height: 86px;
}
.list-bd .item-box .col-num .num-box{
    width: 148px;
    height: 38px;
    border: 1px solid #e0e0e0;
    text-align: center;
    background-color: #fff;
    position: relative;
    margin-top: 22px;
}
.list-bd .item-box .col-num a{
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: #757575;
    font-size: 20px;
    transition: all .3s;
}
.list-bd .item-box .col-num a:hover{
    background-color: #e0e0e0;
}
.list-bd .item-box .col-num input{
    float: left;
    width: 72px;
    height: 38px;
    line-height: 38px;
    padding: 0;
    border-width: 0;
    color: #424242;
    font-size: 16px;
    text-align: center;
}
/* 小计 */
.list-bd .item-box .col-total{
    line-height: 86px;
    height: 86px;
    color: #ff6700;
}
/* 操作 */
.list-bd .item-box .col-action{
    line-height: 86px;
    height: 86px;
}
.list-bd .item-box .col-action p{
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 12px;
    color: #757575;
    font-size: 16px;
    transition: all .3s;
    cursor: pointer;
}
.list-bd .item-box .col-action p:hover{
    color: #fff;
    background-color: #e53935;
}
/* 结算 */
.cart-bar{
    margin: 30px 0;
    height: 50px;
    text-align: right;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}
.cart-bar .section-left{
    float: left;
}
.cart-bar .section-left a{
    color: #757575;
    line-height: 50px;
    margin-left: 32px;
    transition: all .3s;
}
.cart-bar .section-left a:hover{
    color: #ff6700;
}
.cart-bar .section-left .cart-total{
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #eee;
    color: #757575;
}
.cart-bar .section-left .cart-total i{
    color: #ff6700;
}
/* 右边 */
.cart-bar .total-price{
    padding-left: 13px;
    color: #ff6700;
    line-height: 50px;
}
.cart-bar .total-price em{
    font-size: 30px;
}
.cart-bar .total-price a{
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 48px;
    font-size: 18px;
    margin-left: 50px;
    vertical-align: top;
    background: #ff6700;
    text-align: center;
    color: #fff;
}
.cart-bar .total-price a:hover{
    background-color: #f25807;
}
</style>